<template>
  <div class="scroll-wrapper">
    <!-- :success-text="successText" 下拉动作完成后的信息提示[已经是最新的了/文章更新成功]
      success-duration="1500 下拉动作完成后的信息提示 停留时间 -->
     <van-pull-refresh
     v-model="isLoading"
     @refresh="onRefresh"
     :success-text="successText"
     success-duration="1500"
     >
    <!-- 瀑布流加载效果(动作-上拉)
        v-model="loading" 加载动画效果(加载中...)
        :finished="finished" 是否停止加载，false可以继续加载,true停止加载
        finished-text="没有更多了" 停止加载后的文字提示
        @load="onLoad" 加载数据的回调事件，页面初次载入会自动触发
        或者是 滚轮 滚动到系统设置的页面底部，也会自动触发
    -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <!--
          单元格组件
          内容独占一行进行显示，使用其他div也可以
          title：设置单元格标题
      -->
     <van-cell
     v-for="item in articleList"
     :key="item.art_id.toString()"
     :title="item.title"
     @click="$router.push({name:'article',params:{aid:item.art_id.toString()}})">
          <!-- 通过命名插槽方式体现单元格下方描述信息 -->
          <template slot="label">
            <!-- 新闻封面图片也是通过label描述位置体现
              :column-num 根据type的值决定显示的列数
              v-if="item.cover.type>0" 要求type>0才体现宫格
              :border="false" 宫格没有边框
            -->
            <van-grid
              :column-num="item.cover.type"
              :gutter="10"
              :border="false"
              v-if="item.cover.type>0"
            >
              <!-- 封面图片类型：没有type=0、 1个type=1、 3个type=3 -->
              <!-- v-for可以对数字做遍历 -->
              <!-- v-for="xx in 3" //xx: 1、2、3  -->
              <van-grid-item v-for="item2 in item.cover.type" :key="item2">
                <!-- van-image是表现图片的组件，图片下标是从0开始，自然item2-1操作 -->
                <van-image
                width="85"
                height="85"
                :src="item.cover.images[item2-1]"
                lazy-load
                />
              </van-grid-item>
            </van-grid>
            <p>
              <van-icon
              name="close"
              style="float:right;"
              @click.stop="displayDialog(item.art_id.toString())"></van-icon>
              <span>作者:{{item.aut_name}}</span>
              &nbsp;
              <span>评论 :{{item.comm_count}}</span>
              &nbsp;
              <span>时间:{{item.pubdate | formatTime}}</span>
              &nbsp;
            </p>
          </template>
        </van-cell>
    </van-list>
    </van-pull-refresh>
    <!-- 文章更多操作弹出层 -->
    <more-action
    v-model="showDialog"
    :articleID="nowArticleID"
    @dislikeSuccess="handleDislikeSuccess()"
    ></more-action>
  </div>
</template>

<script>
import MoreAction from './com-moreaction.vue'
import { apiArticleList } from '@/api/article.js'
export default {
  name: 'com-article',
  components: {
    MoreAction
  },
  props: {
    channelID: {
      // type 类型限制String Number Array，类型不符合，就接收不到
      // required:true 参数必须传递
      type: Number,
      required: true
    }
  },
  data () {
    return {
      successText: '文章更新成功', // 下拉动作完成后的动画提示内容
      nowArticleID: '', // 被处理的文章id
      showDialog: false, // 控制子组件弹出框显示的标志
      articleList: [],
      ts: Date.now(), // 文章列表分页"时间戳"条件
      // 下拉成员
      isLoading: false, // 是否处于加载状态
      // 瀑布流相关成员
      list: [], // 接收加载好的数据
      loading: false, // “加载中...”动画是否显示(加载的时候才设置为true，加载完毕再设置为false)，每次onLoad执行就设置为true，执行完毕就设置为false
      finished: false, // 加载是否停止的标志，false可以继续加载，true瀑布流停止加载，如果后端没有数据可以提供了，就设置该项目为true即可
      // 激活频道下标标志
      activeChannelIndex: 0
    }
  },
  created () {
    this.getArticleList()
  },
  methods: {
    // 文章不感兴趣的处理，清除目标文章
    handleDislikeSuccess () {
      // 让nowArticleID文章在列表中消失
      // 1.获得目标文章id在文章列表中的下标
      // findIndex是数组的一个方法，可以通过条件获得指定目标在数组列表中的下标序号

      const index = this.articleList.findIndex((item) => {
        // 满足条件就return为true信息出来，那么当前项目的下标序号就获取到了

        return item.art_id.toString() === this.nowArticleID
      })
      // 2.通过下标序号从列表中删除指定文章 （页面级删除）
      this.articleList.splice(index, 1)
    },
    // 展示更多操作的弹层
    displayDialog (artID) {
      this.showDialog = true
      // 把文章id赋予data
      this.nowArticleID = artID
    },
    // 文章列表
    async getArticleList () {
      const obj = {
        channel_id: this.channelID,
        timestamp: this.ts
      }
      const result = await apiArticleList(obj)
      // console.log(result)
      return result
      // this.articleList = result.results
    },
    // 下拉执行的动作
    async onRefresh () {
      // 延迟期0.8秒
      await this.$sleep(800)
      // 获得新文章
      const articles = await this.getArticleList()
      // 头部追加新文章，更新时间戳
      if (articles.results.length > 0) {
        this.articleList.unshift(...articles.results)
        this.ts = articles.pre_timestamp
        // 提示文章更新成功
        this.successText = '文章更新成功'
      } else {
        // 提示： 已经是最新的了
        this.successText = '已经是最新的了'
      }
      // 下拉动画结束
      this.isLoading = false
      // 设置1s延迟
      // setTimeout(() => {
      //   this.onLoad() // 调用上拉获得数据
      //   this.isLoading = false // 下拉加载完成/结束加载动画
      //   this.$toast.success('刷新成功') // 成功提示
      // }, 1000)
    },
    // 瀑布流加载执行的方法
    async onLoad () {
      // 每次执行给延迟0.8秒
      await this.$sleep(800)
      // 瀑布流与真实文章结合
      // 1. 获取真实文章数据
      const article = await this.getArticleList()
      // 2. 对数据进行处理
      if (article.results.length > 0) {
        // 有获得数据
        // data接收数据，要设置“追加”，不要直接赋值
        // 直接赋值会使得瀑布的数据区域填充不满，会造成瀑布不断加载效果
        this.articleList.push(...article.results)
        // ...展开运算符，是要把[]数组标志给去除，使得内部各个小元素暴露除开==出来，进而被push追加使用
        // 更新时间戳，方便获取下一页数据
        this.ts = article.pre_timestamp
      } else {
        // 没有获得到数据，要停止瀑布流
        this.finished = true
      }
      // 3. 停止瀑布加载动画
      this.loading = false
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout设置延迟加载效果，有1s延迟
      // setTimeout(() => {
      //   // 把数字信息追加给list数字
      //   for (let i = 0; i < 12; i++) {
      //     this.list.push(this.list.length + 1)
      //   }

      //   // 加载状态结束
      //   this.loading = false // '加载中。。'动画清除

      //   // 数据全部加载完成
      //   if (this.list.length >= 40) {
      //     this.finished = true // 停止瀑布流加载
      //   }
      // }, 1000)
    }
  }
}
</script>

<style scoped lang='less'>
    // 给上拉列表区域设置样式
    .scroll-wrapper {
      height: 100%;
      overflow-y: auto;
    }
</style>
